<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script type="text/javascript"
                src="http://maps.google.com/maps/api/js?sensor=true">
        </script>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
        <script type="text/javascript">
            /* Decalre some lattitudes and longtitudes */
            var latlng_Australia = new google.maps.LatLng(-25.482951,133.857422);
            var latlng_Brisbane = new google.maps.LatLng(-27.498527, 153.028564);
            var latlng_Sydney = new google.maps.LatLng(-33.861293,151.149902);
            var latlng_Canberra = new google.maps.LatLng(-35.335293,149.095459);
            var latlng_Perth = new google.maps.LatLng(-31.942840,115.861816);
            var latlng_Adelaide = new google.maps.LatLng(-34.939985,138.592529);

            var latlng_Sydney_North = new google.maps.LatLng(-33.835061,151.206207);
            var latlng_Sydney_South = new google.maps.LatLng(-33.908890,151.219254);
            var latlng_Sydney_East = new google.maps.LatLng(-33.888943,151.273842);
            var latlng_Sydney_West = new google.maps.LatLng(-33.870986,151.092224);
            
            function initialize_map() {
                /* Setup Australia map */
                var myOptions = {
                    zoom: 5,
                    center: latlng_Australia,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

                /* Declare some contents for popup info window */
                var contentString = 
                    '<div style="float:left;width:190px;margin-right:10px;">'
                    + '<h3>This is an event in Sydney.</h3>'
                    + '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra viverra molestie. Donec nisl dolor, sagittis accumsan dapibus et, pellentesque sed justo. Aliquam interdum iaculis magna id vehicula. Curabitur sodales, quam a vestibulum aliquet, mauris lorem volutpat turpis, sed pulvinar nibh velit ac libero.</p>'
                    + '</div><div style="float:left;width:190px;"><br/>'
                    + '<iframe width="190" height="150" src="http://www.youtube.com/embed/UZ0qafOiLEU" frameborder="0" allowfullscreen></iframe>'
                    + '<div style="text-align:center;"><br/><span style="font-size:35px;color:red;"><strong>$1000</strong></span></div>'
                    + '<br/><button style="height:30px;width:190px;font-size:18px;">Give a whole amount</button>'
                    + '<div style="text-align:center;margin:0;padding:0;"><a href="">Give a small amount</a></div>'
                    + '</div>'
                    + '';
               
                var infowindow = new google.maps.InfoWindow({
                    content: contentString,
                    maxWidth: 300
                });
                
                var icn_star = 'img/icn-star.png';                
                var marker_Sydney = new google.maps.Marker({
                    position: latlng_Sydney,
                    map: map,
                    title:"Sydney Starlight Party - Sydney High School",
                    icon: icn_star
                });
                var marker_Brisbane = new google.maps.Marker({
                    position: latlng_Brisbane,
                    map: map,
                    title:"Brisbane Starlight Fair - Brisbane Kindergarden",
                    icon: icn_star
                });
                var marker_Canberra = new google.maps.Marker({
                    position: latlng_Canberra,
                    map: map,
                    title:"Canberra Starlight Party - Canberra Junior High School",
                    icon: icn_star
                });
                var marker_Adelaide = new google.maps.Marker({
                    position: latlng_Adelaide,
                    map: map,
                    title:"Adelaide Starlight Party - University of Adelaide",
                    icon: icn_star
                });
                var marker_Perth = new google.maps.Marker({
                    position: latlng_Perth,
                    map: map,
                    title:"Perth Starlight Party - Parth Children Hospital",
                    icon: icn_star
                });

                /* Add event listeners for markers */
                google.maps.event.addListener(marker_Sydney, 'click', function() {
                    // infowindow.open(map,marker_Sydney);
                    jQuery( "#info-window" ).show();
                    jQuery("#info-window-content").empty();
                    jQuery("#info-window-content").append(contentString);
                });
                google.maps.event.addListener(marker_Brisbane, 'click', function() {
                    infowindow.open(map,marker_Brisbane);
                });
                google.maps.event.addListener(marker_Canberra, 'click', function() {
                    infowindow.open(map,marker_Canberra);
                });
                google.maps.event.addListener(marker_Adelaide, 'click', function() {
                    infowindow.open(map,marker_Adelaide);
                });
                google.maps.event.addListener(marker_Perth, 'click', function() {
                    infowindow.open(map,marker_Perth);
                });
            }

            function processSearchMap() {
                var search_query = jQuery('#search-input').val();
                if (search_query == "sydney") {
                    var myOptions = {
                        zoom: 12,
                        center: latlng_Sydney,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);

                    var icn_flag = 'img/red_flag.png';
                    var marker_Sydney_North = new google.maps.Marker({
                        position: latlng_Sydney_North,
                        map: map,
                        title:"Sydney Starlight Party - North Sydney High School",
                        icon: icn_flag
                    });
                    var marker_Sydney_South = new google.maps.Marker({
                        position: latlng_Sydney_South,
                        map: map,
                        title:"Starlight Big day out - South Sydney Shopping Center",
                        icon: icn_flag
                    });
                    var marker_Sydney_East = new google.maps.Marker({
                        position: latlng_Sydney_East,
                        map: map,
                        title:"Starlight Breakfast Serving - East Sydney Train station",
                        icon: icn_flag
                    });
                    var marker_Sydney_West = new google.maps.Marker({
                        position: latlng_Sydney_West,
                        map: map,
                        title:"Sydney Starlight Uni Day - West Sydney University",
                        icon: icn_flag
                    });
                }
            }
        </script>
    </head>
    <body onLoad="initialize_map()">
        <div id="app-wrapper">
            <div id="search-form" class="ui-widget-content">
                <div id="search-form-title">
                    Enter suburb or postcode
                </div>
                <div id="search-form-content">
                    <form onsubmit="processSearchMap()">
                        <input type="text" name="search-input" value="" id="search-input"/>
                        <input type="button" onclick="processSearchMap()" value="Find" class="Find"/>
                    </form>
                </div>
            </div>
            <div id="info-window" class="ui-widget-content">
                <div id="info-window-title" class="window-title">
                    View event details
                </div>
                <div id="info-window-content" class="window-content">
                    This window will show information about the event.
                    The text in this window will change according to the event chosen
                    This window can also show options to donate or join an event.
                </div>
            </div>
            <div id="content-wrapper">
                <div id="map_canvas"></div>
            </div>
        </div>
        <script type="text/javascript">            
            jQuery('#search-form-title-slide').click(function() {
                if (jQuery("#search-form-content").is(":hidden")) {
                    jQuery("#search-form-content").slideDown();
                } else {
                    jQuery("#search-form-content").slideUp();
                }
            });
             jQuery( "#info-window" ).hide();
            jQuery( "#search-form" ).draggable();
            jQuery( "#search-form" ).resizable();
            jQuery( "#info-window" ).draggable();
            jQuery( "#info-window" ).resizable();
        </script>
    </body>
</html>